<template>
	<view class="container">
		<view class="big-title">您好!</view>
		<view class="small-title">号卡</view>
		<view class="box">
			<view class="title">
				<view class="reg" style="margin-right: 30rpx;">
					<span class="line-word tab">注册</span>
					<span class="line line-tab"></span>
				</view>
				<view class="reg">
					<span class="line-word" @click="backLogin" :style="{color:tabColor=='1'?'blue':'black'}">登录</span>
				</view>
			</view>
			<view class="login-account">
				<image src="https://sslc-oss.oss-cn-chengdu.aliyuncs.com/machineMiniProgram/static/account.png" mode="">
				</image>
				<u-input v-model="username" placeholder="请输入账号" class="input" />
			</view>
			<view class="login-password" style="margin: 40rpx 0 50rpx 0;">
				<image src="https://sslc-oss.oss-cn-chengdu.aliyuncs.com/machineMiniProgram/static/password.png"
					mode="">
				</image>
				<u-input v-model="password" :type="'password'" placeholder="请输入密码" class="input"
					:password-icon="'true'" />
			</view>
			<view class="login-account" style="margin-bottom: 40rpx;">
				<u-icon name="phone" class="phone" height="48" width="55"></u-icon>
				<u-input v-model="usernamePhone" placeholder="请输入手机号" class="input" />
			</view>
			<view class="login-password"
				style="display: flex;align-items: center;margin-bottom: 50rpx;position: relative;">
				<view style="display: flex;align-items: center;width: 100%;">
					<u-icon name="info-circle" class="phone" height="48" width="55"></u-icon>
					<view style="width: 63%;">
						<u-input v-model="passwordPhone" :type="'password'" placeholder="请输入验证码" :password-icon="'false'"
							class="input" style="width:100%;"/>
					</view>
				</view>
				<span
					style="color: blue;width: 180rpx;position: absolute;z-index: 2;right: 0;text-align: right;margin-right: 10rpx;"
					@click="getCode">{{reconds}}{{miao}}{{getCodeData}}</span>
			</view>
			<view class="login-account" style="margin-bottom: 40rpx;">
				<u-icon name="integral" class="phone" height="48" width="55"></u-icon>
				<u-input v-model="code" placeholder="请输入5-8位推荐码" class="input" />
			</view>
			<view class="button" @click="registerClick">注册</view>
		</view>
		<u-modal v-model="show" :content="content" :show-title="false"></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		registerApi
	} from "@/apis/register.js"
	import {
		getCode
	} from "@/apis/code.js"
	export default {
		data() {
			return {
				username: '',
				usernamePhone: '',
				passwordPhone: '',
				password: '',
				code: '',
				reconds: '',
				miao: '',
				getCodeData: '获取验证码',
				show: false,
				content: '',
				tabColor: '0',
				timer: ''
			}
		},
		onShow() {

		},
		methods: {
			backLogin() {
				this.tabColor = '1'
				setTimeout(() => {
					this.tabColor = '0';
					uni.redirectTo({
						url: "/pages/login/login"
					})
				}, 200);
			},
			//闭包函数 优化代码
			regExp(val) {
				return function(str) {
					return val.test(str);
				}
			},
			beforedestroy() {
				//清除定时器
				clearInterval(this.timer)
			},
			async registerClick() {
				//注册
				//校验
				if (this.username == '') {
					this.content = '请输入账号名称';
					this.show = true;
					return;
				}
				if (this.password == '') {
					this.content = '请输入密码';
					this.show = true;
					return;
				}
				if (this.usernamePhone == '') {
					this.content = '请输入手机号';
					this.show = true;
					return;
				}
				const regExp = this.regExp(/^1[3456789]\d{9}$/);
				if (!regExp(this.usernamePhone)) {
					this.content = '请输入正确格式的手机号';
					this.show = true;
					return;
				}
				if (this.passwordPhone == '') {
					this.content = '请输入验证码';
					this.show = true;
					return;
				}
				if (this.code == '') {
					this.content = '请输入推荐码';
					this.show = true;
					return;
				};
				const regExpCode = this.regExp(/^[a-zA-Z0-9]{5,8}$/);

				if (!regExpCode(this.code)) {
					this.content = '请输入5到8位数字或字母的推广码';
					this.show = true;
					return;
				};
				const register = await registerApi({
					username: this.username,
					password: this.password,
					phoneNumber: this.usernamePhone,
					code: this.passwordPhone,
					extensionCode: this.code
				});
				if (register.code == 200) {
					this.$refs.uToast.show({
						title: '恭喜您!注册成功',
						type: 'success',
						url: '/pages/login/login'
					})
				} else {
					this.content = register.msg;
					this.show = true;
					return;
				}
			},
			async getCode() {
				//验证码
				// if (this.getCodeData == '重新获取') return;
				if(this.timer){
					clearInterval(this.timer)
				};
				const code = await getCode(this.usernamePhone);
				if (code.code != 200) {
					this.show = true;
					this.content = code.msg;
				} else {
					this.miao = '秒';
					this.reconds = '60';
					this.getCodeData = '重新获取'
					this.timer = setInterval(() => {
						if (this.reconds > '0') {
							this.reconds--;
						};
						if (this.reconds == '0') {
							this.miao = '';
							this.reconds = '';
							this.getCodeData = '重新获取'
						}
					}, 1000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		// padding: 0 32rpx;
		// box-sizing: border-box;
		// background: url('https://sslc-oss.oss-cn-chengdu.aliyuncs.com/erp/static/login.png');
		// background-repeat: no-repeat;
		// background-size: cover;
		background-color: #307FE8;
		padding: 200rpx 40rpx 0 40rpx;
		box-sizing: border-box;

		.big-title {
			color: white;
			font-size: 48rpx;
			font-weight: bold;
		}

		.small-title {
			color: white;
			font-size: 30rpx;
			margin: 30rpx 0;
		}

		.box {
			height: 800rpx;
			width: 100%;
			border-radius: 20rpx;
			background-color: white;
			padding: 30rpx 40rpx 40rpx 40rpx;
			box-sizing: border-box;

			.title {
				width: 100%;
				height: 80rpx;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.reg {
					height: 100%;
					display: flex;
					flex-direction: column;
					// justify-content: space-around;
					align-items: center;
					color: black;

					.line {
						width: 32rpx;
						border: 3rpx solid black;
						border-radius: 20rpx;
					}

					.tab {
						color: blue;
					}

					.line-tab {
						border: 3rpx solid blue;
					}

					.line-word {
						margin-bottom: 12rpx;
					}
				}
			}

			.login-account,
			.login-password {
				border: 1rpx solid white;
				width: 100%;
				height: 66rpx;
				padding: 24rpx;
				box-sizing: border-box;
				border-radius: 48rpx;
				border: 1rpx solid lightgray;
				display: flex;
				align-items: center;

				.phone {
					margin-right: 15rpx;
				}

				image {
					width: 36rpx;
					height: 32rpx;
					margin-right: 15rpx;
				}

				.input {
					height: 54rpx;
					width: 100%;
					margin-bottom: 16rpx;
				}
			}

			.button {
				height: 85rpx;
				width: 100%;
				background-color: blue;
				text-align: center;
				line-height: 85rpx;
				border-radius: 50rpx;
				font-size: 30rpx;
				color: white;
			}
		}
	}
</style>